import React, { useEffect, useState } from 'react'
import {
Input,
  Row,
  Col,
  Avatar,
  Tag,
  Tabs
} from 'antd';
import { UserOutlined, } from '@ant-design/icons';
const { TextArea } = Input;

export default function PatientHeadDetails() {

  return (
    <div className='inspect'>
 <div className='Patient-head ' >
        <Row>
          <Col span={8}>
            <div className='Patient-head-details'>
              <Avatar size={64} icon={<UserOutlined />} style={{ marginRight: "20px" }} />
              <div>
                <div>
                  <span>{"サトウ"+" "}</span>
                  <span>{"ケンイチ"+" "}</span>
                </div>
                <div>
                <span>{"佐藤"+" "}</span>
                <span>{"健一"+" "}</span>
                </div>
                <div>
                <span>{"1980年1月1日生"+" "}</span>
                <span>{"4111ア月"+" "}</span>
                <span>{"男性"+" "}</span>
                  <span><Tag color="magenta">magenta</Tag></span>

                </div>
              </div>

            </div>
          </Col >
          <Col span={8}>
            <TextArea rows={4} disabled autoSize={{ minRows: 3, maxRows: 5 }} />
          </Col>
          <Col span={5}>
            <div style={{marginLeft:"20px"}}>
              <div>予約日時 </div>
              <div>2021/12/1(水)10:00~10:15</div>
              <div><Tag color="magenta">保険证等未提出</Tag></div>
            </div>
          </Col>
          <Col span={3} >
                <div className='user-name-box'>
                  <span  > 大川 智之</span>
                  <Avatar style={{marginLeft:"20px"}} size={36} icon={<UserOutlined />} />
                </div>

              </Col>
        </Row>


      </div>

    </div>
     
  )
}
